import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import CSSModules from 'react-css-modules';
import {
  List,
  Card,
  Row,
  Col,
  Button,
  Menu,
  Icon,
  Dropdown,
  Tag,
  Avatar,
  Popconfirm,
} from 'antd';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';

import styles from './index.less';

const {Description} = DescriptionList;
const ButtonGroup = Button.Group,
  titleMaxLength = 30;

class ArticleItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {}
  handleCheckData = () => {
    const {onCheckData} = this.props;
    onCheckData && onCheckData();
  };
  handleDeletePost = () => {
    const {onDelete, articleId} = this.props;
    onDelete && onDelete(articleId);
  };
  handleDeleteReport = () => {
    const {onDeleteReport, reportId} = this.props;
    onDeleteReport && onDeleteReport(reportId);
  };
  handleOnline = () => {
    const {onOnline} = this.props;
    onOnline && onOnline();
  };
  render() {
    const {
      articleId,
      view,
      reason,
      href,
      articleTitle,
      channelName,
      type,
    } = this.props;

    const ListExtraButtons = ({data: {articleId}}) => {
      return (
        <div className={styles.listItemExtra}>
          <ButtonGroup>

            <Popconfirm
              title="是否忽略此次举报?"
              okText="确认"
              cancelText="取消"
              onConfirm={this.handleDeleteReport}>
              <Button size="large">
                举报无效
              </Button>
            </Popconfirm>

            <Popconfirm
              title="确认删除文章?"
              okText="确认"
              cancelText="取消"
              onConfirm={this.handleDeletePost}>
              <Button type="danger" size="large">
                删除文章
              </Button>
            </Popconfirm>
          </ButtonGroup>
          <p />
          <ButtonGroup />
        </div>
      );
    };

    const ListContent = ({data: {reportTime, authorName}}) => (
      <div className={styles.listContent}>
        <div className={styles.extra}>
          {authorName}&nbsp;发布在<em>{reportTime}</em>
        </div>
      </div>
    );

    return (
      <List.Item
        key={articleId}
        actions={[
          <span>
            被举报原因: <i style={{color: 'red'}}>"{reason}"</i>
          </span>,
        ]}
        extra={<ListExtraButtons data={this.props} />}>
        <List.Item.Meta
          title={
            <a className={styles.listItemMetaTitle}>
              {articleTitle.length > titleMaxLength
                ? `${articleTitle.substr(0, titleMaxLength)}...`
                : articleTitle}
            </a>
          }
          description={
            <span>
              <Tag>{channelName}</Tag>
            </span>
          }
        />
        <ListContent data={this.props} />
      </List.Item>
    );
  }
}

export default CSSModules(ArticleItem, styles);
